<template>
  <div class="nomal_echars">
    <div id="main" class="main" />
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {
    this.init_one()
  },
  methods: {
    init_one() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          name: '北京各个地区',
          type: 'category',
          data: ['东城区', '西城区', '海淀区', '朝阳区', '丰台区', '石景山区', '通州区', '顺义区', '房山区', '大兴区', '昌平区', '怀柔区', '平谷区', '门头沟区']
        },
        yAxis: {
          name: '正常人数量(单位/W)',
          type: 'value'
        },
        series: [{
          data: [96, 132, 211, 183, 104, 36, 65, 57, 77, 59, 51, 28, 40, 24],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      }

      option && myChart.setOption(option)
    }
  }

}
</script>

<style scoped>
  .main{
    margin: 44px auto;
    width: 1200px;
    height: 600px;
    background-color: #fff;
  }
</style>
